<template>
  <div class="user-group flex">
    <!-- 空间 -->
    <toolbox class="user-group-toolbox shrink-0"></toolbox>
    <!--  -->
    <div class="user-group-wrapper flex-1">
      <div class="user-group-tab">
        <el-radio-group v-model="isCollapse">
          <el-radio-button :value="true">用户组</el-radio-button>
        </el-radio-group>
      </div>
      <div class="flex">
        <el-button type="primary" :icon="Plus" @click="addUserGroup">添加自定义用户组</el-button>
        <div class="user-group-search">
          <el-input
            v-model="search"
            placeholder="搜索"
            :prefix-icon="Search"
          />
        </div>
      </div>
      <!-- 表格 -->
      <div class="user-group-table">
        <user-group-table> </user-group-table>
      </div>
    </div>

    <!-- 抽屉 -->
    <lb-drawer v-model="drawer" size="50%">
      <template #header>
        <div class="drawer-title flex justify-between items-center">
          <div>添加自定义用户组</div>
          <el-icon @click="drawer = false" class="cursor-pointer"><CloseBold /></el-icon>
        </div>
      </template>
      
      <template #default>
        <user-group-form
          v-show="isFirstFrom"
          class="user-group-form"
          @onConfigPermissions="onConfigPermissions"
          @onCloseDrawer="onCloseDrawer"
        />
        <!--  -->
        <config-permission-form
          v-show="!isFirstFrom"
          class="user-group-form"
          @onCloseDrawer="onCloseDrawer"
          :firstFrom="firstFrom"
        />
      </template>
    </lb-drawer>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import toolbox from '../components/toolbox.vue'
import { Plus, Search, CloseBold } from '@element-plus/icons-vue'
import userGroupTable from '../components/userGroupTable.vue'
import lbDrawer from '../components/common/lbDrawer.vue'
import userGroupForm from '../components/common/userGroupForm.vue'
import configPermissionForm from '../components/common/configPermissionForm.vue'

const isCollapse = ref(true) //tab 
const search = ref('') // 搜索
const drawer = ref(false) // 抽屉
const isFirstFrom = ref(true) // 是否是第一个表单

// 添加用户组
const addUserGroup = () => {
  drawer.value = true
  isFirstFrom.value = true
}

const firstFrom = ref()
// 配置权限
const onConfigPermissions = (form) => {
  firstFrom.value = form
  isFirstFrom.value = false
}

// 关闭
const onCloseDrawer = () => {
  drawer.value = false
}

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.user-group {
  height: 100%;
  .user-group-toolbox{
    width: 180px;
    border-right: 1px solid #333;
  }
  .user-group-wrapper{
    padding: 15px;
    .user-group-tab {
      margin-bottom: 15px;
    }
    .user-group-search {
      margin-left: 15px;
    }
    .user-group-table {
      margin-top: 15px;
    }
  }
}

.drawer-title {
  background-color: #2b2b2b;
  padding: 10px 20px;
  margin-bottom: 20px;
}
.user-group-form {
  padding: 0 20px;
}
</style>
